<template>
  <div id="login">
    <el-dialog title="玩转面试题" :visible.sync="dialogFormVisible" style="width:700px;height: 700px;margin: 0 auto">
      <el-form :model="formLabelAlign" status-icon :rules="rules" ref="formLabelAlign" class="demo-ruleForm"
               style="width: 360px;margin-left: -100px">
        <el-form-item :label-width="formLabelWidth" prop="username">
          <el-input v-model="formLabelAlign.username" autocomplete="off" :style="width" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" prop="password">
          <el-input type="password" v-model="formLabelAlign.password" autocomplete="off" :style="width" placeholder="密码"></el-input>
        </el-form-item>
        <el-link type="warning" style="font-size: 10px;margin-left: 100px">忘记密码?</el-link>
      </el-form>
      <div>
        <el-button type="primary" @click="loginBtn('formLabelAlign')" style="width: 300px;margin-top: 100px">登 录</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    //用户名验证
    const validUsername = (rule, value, callback) => {
      //const reg = /^[a-zA-Z0-9]+$/
      if (value === '') {
        callback(new Error('请输入用户名'))
      }
      /*else if (!reg.test(value)) {
        callback(new Error('用户名必须是由6-18位英文(含大小写)+数字组成'))
      } */
      else {
        callback()
      }
    };
    //密码验证
    const validPassword = (rule, value, callback) => {
      //const reg = /^[a-zA-Z0-9]+$/
      if (value === '') {
        callback(new Error('请输入密码'))
      }
      /*else if (!reg.test(value)) {
        callback(new Error('用户名必须是由6-18位英文(含大小写)+数字组成'))
      } */
      else {
        callback()
      }
    };
    return {
      dialogFormVisible: false, //登录对话框是否打开
      formLabelWidth: '100px', //写入的宽度
      width:'width:300px',
      formLabelAlign: {
        username: '',
        password: ''
      },
      //前端验证
      rules: {
        username: [
          { required:true, validator: validUsername, trigger: 'blur' }
        ],
        password: [
          { required:true, validator: validPassword, trigger: 'blur' }
        ],
        /*age: [
          { validator: checkAge, trigger: 'blur' }
        ]*/
      }
    }
  },
  methods: {
    //此方法由父组件bar来触发
    open() {
      this.dialogFormVisible=true;
    },
    //登录按钮方法
    loginBtn(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) { //表单验证通过情况
          this.$myAxios('/login/go','post',this.formLabelAlign,resp=>{
            //store包里的index,js
            //将token信息保存
            this.$store.commit("SET_TOKEN",resp.data.data.token);
            //this.$store.commit("SET_USERINFO",resp.data.data.user);
            //this.$router.replace("/index/frontPage");
            //将登录标记置为1
            this.$store.commit("IS_LOGIN",1)
            //关闭登录窗口
            this.dialogFormVisible=false
            //刷新页面
            location.reload()
          })
        } else { //表单验证没通过情况
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  created() {
    //加载首页如果没登录，弹出登录框
    this.dialogFormVisible=this.$store.getters.loginFlag==1?false:true
  }
}
</script>

<style scoped>
  #login{

  }
</style>